<template>
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="任务记录" name="free">
            <el-row>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-select v-model="value" placeholder="任务状态">
                            <el-option label="进行中" value="shanghai"></el-option>
                            <el-option label="待确认" value="beijing"></el-option>
                            <el-option label="已延期" value="beijing"></el-option>
                            <el-option label="已完成" value="beijing"></el-option>
                            <el-option label="不允通过" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="input" placeholder="任务标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search"></el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        border
                        stripe
                        :highlight-current-row="true"
                        :header-cell-style="{ background: '#ededed', color: '#333' }"
                >
                    <el-table-column prop="name" align="center" label="任务名称" />
                    <el-table-column prop="describe" align="center" label="任务描述" />
                    <el-table-column prop="start" align="center" label="开始时间" />
                    <el-table-column prop="out" align="center" label="结束时间" />
                    <el-table-column prop="upTime" align="center" label="升级时间" />
                    <el-table-column prop="jian" align="center" label="消耗积分" />
                    <el-table-column prop="jia" align="center" label="奖励积分" />
                    <el-table-column prop="worker" align="center" label="申领员工" />
                    <el-table-column prop="faTime" align="center" label="提交时间" />
                    <el-table-column prop="type" align="center" label="任务状态" />
                    <el-table-column prop="difficult" align="center" label="任务难度" />
                    <el-table-column prop="remarks" align="center" label="操作" />
                </el-table>
            </el-row>

            <el-pagination
                    class="text-right"
                    background
                    :current-page="1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="0"
            />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: 'task',
        data() {
            return {
                activeName: 'free',
                form: {
                    name: '',
                    describe: '',
                    start: '',
                    out: '',
                    upTime: '',
                    jian: '',
                    jia: '',
                    worker: '',
                    faTime: '',
                    type: '',
                    difficult: '',
                    remarks: '',
                },
                value: '',
                input: '',
            };
        },
        methods: {},
    };
</script>

<style scoped>
    el-row {
    }
    .text-right{
        float: right;
    }
</style>
